<template>
  <app-card>
    <template #header>
      <el-space :size="10" spacer="|">
        <el-button
            type="primary"
            @click="uploadMedia"
        >
          <el-icon>
            <uploadFilled/>
          </el-icon>
          上传文件
        </el-button>
        <el-button
            type="danger"
            @click="batchDelete"
        >
          <el-icon>
            <delete/>
          </el-icon>
          删除文件
        </el-button>
        <el-button
            type="success"
            @click="loadList"
        >
          <el-icon>
            <refresh/>
          </el-icon>
          刷新文件
        </el-button>
      </el-space>
    </template>
    <el-table
        :data="list"
        v-loading="listLoading"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%"
    >
      <el-table-column fixed="left" type="selection" width="55"/>
      <el-table-column align="center" width="220px" prop="pathId" label="文件id">
        <template #default="{row}">
          <el-button type="text" :title="row.filePath" @click="copyUrl(row.filePath)">{{ row.pathId }}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="fileSuffix" label="文件后缀"/>
      <el-table-column align="center" prop="fileSize" label="文件大小">
        <template #default="{row}">
          {{ bytesToSize(row.fileSize) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userName" label="用户名称"/>
      <el-table-column align="center" width="170px" prop="createdAt" sortable="custom" label="创建日期"/>
    </el-table>
    <app-pagination
        v-model:page="listParams.pageNum"
        v-model:limit="listParams.pageSize"
        :list-count="listCount"
        :load-list="loadList"
        :disabled="listLoading"
    />
  </app-card>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {IFileInfo} from "@/api/types/static";
import {IListParams} from "@/api/types/common";
import {getFileList} from "@/api/static";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {delFile, upload} from "@/api/upload";
import {bytesToSize, copy} from "@/utils/constants";

const list = ref<IFileInfo[]>([]);
const listCount = ref(0);
const listLoading = ref(false);
const listParams = reactive<IListParams>({
  pageNum: 1,
  pageSize: 10,
});
const selectionItems = ref<IFileInfo[]>([]);

onMounted(() => {
  loadList();
});

const copyUrl = (path: string) => {
  copy(path)
  ElMessage.success(`拷贝【${path}】`)
}

const loadList = async () => {
  listLoading.value = true;
  const data = await getFileList(listParams).finally(() => {
    listLoading.value = false;
  });
  list.value = data.rows;
  listCount.value = data.total;
};

// 选择数据
const handleSelectionChange = (val: IFileInfo[]) => {
  selectionItems.value = val;
};
// 排序
const handleSortChange = ({prop, order}: {
  prop: string; order: string;
}) => {
  listParams.sortField = prop;
  listParams.sortOrder = order
  loadList();
};

// 批量删除视频
const batchDelete = () => {
  if (selectionItems.value.length === 0) {
    ElMessage.warning(`请选择要删除的文件!`)
    return
  }
  ElMessageBox.confirm(
      '是否永久删除选择的文件！',
      '提醒', {confirmButtonText: '确认', cancelButtonText: '取消',})
      .then(async () => {
        for (const path of selectionItems.value) {
          await delFile('file', path.filePath)
        }
        ElMessage.success(`文件已删除!`)
        await loadList()
      })
}

// 上传文件
const uploadMedia = () => {
  const input = document.createElement('input') as HTMLInputElement
  input.setAttribute('type', 'file')
  input.setAttribute('accept', '*.*')
  input.click()
  input.onchange = async () => {
    const loading = ElLoading.service({
      lock: true,
      text: '文件上传中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })

    await upload('file', input.files![0])
    loading.close()
    ElMessage.success(`文件上传成功!`)
    await loadList()
  }
}

</script>

<style lang="scss" scoped>
</style>
